<template>
  <div>
    会员等级
    <input type="button" value="增加" @click="add" />
    等级名称<input type="text" v-model="querInfo.LevelName" />
    <input type="button" value="查询" @click="getlist" />
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>LevelId</td>
          <td>LevelName</td>
          <td>操作</td>
        </tr>
        <tr v-for="item in list">
          <td>{{ item.LevelId }}</td>
          <td>{{ item.LevelName }}</td>
          <td>
            <input type="button" value="修改" @click="update(item.LevelId)"/>
            <input type="button" value="删除" @click="del(item.LevelId)"/>
            <input type="button" value="分配权益" />
          </td>
        </tr>
      </tbody>
    </table>
    <div>
      <span>
        <p>
          <span>总共{{ sumindex }}页</span>
          <span>总共{{ sumsize }}条</span>
          <span>{{ querInfo.index }}/{{ sumindex }}</span>
        </p>
        <input type="button" value="首页" @click="goindex('a')"/>
        <input type="button" value="上一页" @click="goindex('b')"/>
        <input type="button" value="下一页" @click="goindex('c')"/>
        <input type="button" value="尾页" @click="goindex('d')" />
        <input type="text" v-model="Page"/>
        <input type="button" value="GO" @click="goindex(Page)"/>
        <select v-model="querInfo.size" @change="Change">
          <option :value="item"v-for="item in arr">每页显示{{item}}条</option>
        </select>
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
import { get } from 'node_modules/axios/index.cjs';
const router = useRouter();
const route = useRoute();


const update=(LevelId:any)=>{
  router.push({
    path:'/main/meberLevelupdate',
    query:{
      LevelId:LevelId
    }
  })
}



const del=(LevelId:any)=>{
  let f=confirm('确认删除吗!')
  if(f==true){
    let obj={
      LevelId:LevelId,
    }
    axios({
      url:'/api/one/Leveldel/Leveldel',
      method:'delete',
      params:obj
    }).then((res)=>{
      console.log(res)
      if(res.data.data>0){
        alert('删除成功');
        return;
      }
      else
      {
        alert('删除失败');
        return;
      }
    }).catch((err)=>{
      console.log(err)
    })
  }
}



const add = () => {
  router.push('/main/meberLevelAdd');
};

let data: any = reactive({
  querInfo: {
    LevelName: '',
    index: 1,
    size: 2
  },
  sumindex: 0,
  sumsize: 0,
  list: [],
  Page:'',
  arr:[2,3,4,5],
});
let { querInfo, list, sumindex, sumsize,Page,arr } = toRefs(data);

const Change=()=>{
  querInfo.value.index=1;
  getlist();
}


const goindex=(str:any)=>{
  switch(str){
    case 'a':
    if(querInfo.value.index==1)
      {
        alert('已经到第一页了');
        return;
      }
    querInfo.value.index=1;
    break;
    case 'b':
    if(querInfo.value.index==1)
      {
        alert('已经到第一页了');
        return;
      }
    querInfo.value.index--;
    break;
    case 'c':
      if(querInfo.value.index==sumindex.value)
      {
        alert('已经最后一页了');
        return;
      }
    querInfo.value.index++;
    break;
    case 'd':
    if(querInfo.value.index==sumindex.value)
      {
        alert('已经最后一页了');
        return;
      }
    querInfo.value.index=sumindex.value;
    break;
    case str:
        if(str==''){
            alert('页码不能为空');
            return;
        }
        if(isNaN(str)==true){
            alert('不是数字');
            return;
        }
        if(str<1||str>sumindex.value){
            alert('页码只能是1到'+sumindex.value+'之间的数字');
            return;
        }
          querInfo.value.index=str;
       break;
  }


    getlist();
    Page.value=querInfo.value.index;


}



onMounted(() => {
  getlist();
});
const getlist = () => {
  let obj = {
    LevelName: querInfo.value.LevelName,
    index: querInfo.value.index,
    size: querInfo.value.size
  };
  axios({
    url: '/api/one/LevelShow/LevelShow',
    method: 'get',
    params: obj
  })
    .then((res) => {
      console.log(res);
      (list.value = res.data.data),
        (sumindex.value = res.data.sumindex),
        (sumsize.value = res.data.sumsize);
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
